<template>
  <view class="card" @click.stop="goto(house)">
    <view class="houses-item-left">
      <image
        src="/static/other_icons/house-index.png"
        class="houses-pic"
      ></image>
    </view>
    <!-- 房屋右侧信息区域 -->
    <view class="houses-item-right">
      <view class="top-title">
        <text class="onsale">{{ house.status }}</text>
        <text class="slogan">户型：{{ house.estateType }}</text>
      </view>
      <!-- <view class="houses-name">{{houses.name}}</view>
			<view class="houses-info">{{houses.info}}</view>
			<view class="houses-price">{{houses.price}}万元/套</view> -->
      <view class="houses-name"
        >{{ house.building }}栋 {{ house.unit }}单元 {{ house.num }}号</view
      >
      <view class="houses-info">建筑面积：134㎡</view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    house: Object,
    title: String,
  },
  name: "house-item",
  data() {
    return {};
  },
  methods: {
    goto(house) {
      let _item = decodeURIComponent(JSON.stringify(house));
      uni.setStorageSync("flag", "house");
      if (this.title) {
        uni.navigateTo({
          url: "/pages/data_check_progress/data_check_progress?item=" + _item,
        });
      } else {
        uni.setStorageSync("houseId", house.estateId);
        uni.navigateTo({
          url:
            "/pages/house_building_select_check_items/house_building_select_check_items?item=" +
            _item,
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.card {
  padding: 20rpx;
  background-color: #ffffff;
  border-radius: 20rpx;
  border: 1rpx solid #efefef;
  display: flex;
  flex-direction: row;
  margin-bottom: 20rpx;

  .houses-item-left {
    .houses-pic {
      width: 200rpx;
      height: 200rpx;
      display: block;
    }
  }

  .houses-item-right {
    margin-left: 40rpx;
    display: flex;
    justify-content: space-between;
    flex-direction: column;

    .top-title {
      display: flex;
      flex-direction: row;
      flex-grow: 1;

      .onsale {
        background: linear-gradient(90deg, #e93423 0%, #fb6858 100%);
        border-radius: 4rpx;
        font-size: 24rpx;
        color: #ffffff;
        width: 66rpx;
        height: 30rpx;
        text-align: center;
      }

      .slogan {
        margin-left: 17rpx;
        font-size: 24rpx;
        font-weight: 500;
        color: #333333;
      }
    }

    .houses-name {
      font-size: 28rpx;
      font-weight: bold;
      color: #333333;
    }

    .houses-info {
      flex-grow: 4;
      font-size: 24rpx;
      font-weight: 500;
      color: #999999;
    }

    .houses-price {
      font-size: 28rpx;
      font-weight: bold;
      color: #e62129;
    }
  }
}
</style>
